import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';
import { action } from '@storybook/addon-actions';

import Upload, { UploadProps, UploadFile } from './index';
import Icon from '../Icon';

const defaultFileList: UploadFile[] = [
  {
    uid: '123',
    size: 1234,
    name: 'hello.md',
    status: 'uploading',
    percent: 30,
  },
  { uid: '122', size: 1234, name: 'xyz.md', status: 'success', percent: 30 },
  { uid: '121', size: 1234, name: 'eyiha.md', status: 'error', percent: 30 },
];

const style: React.CSSProperties = {
  width: '200px',
};

// 声明故事的所属模块和名称
export default {
  title: 'Components/Upload',
  component: Upload,
} as Meta;

// 使用的模板
const Template: Story<UploadProps> = () => {
  return (
    <div style={{ width: '200px' }}>
      <Upload
        defaultFileList={defaultFileList}
        action='https://www.mocky.io/v2/5cc8019d300000980a055e76'
        onChange={action('changed')}
        onRemove={action('removed')}
        accept='.png'
        multiple
        drag
      >
        <Icon icon='upload' size='5x' theme='secondary' />
        <br />
        <p>Drag file over to upload</p>
      </Upload>
    </div>
  );
};

// name="fileName"
// multiple
// drag
export const Default = Template.bind({
  style,
});

Default.storyName = '默认的 Upload';
